<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          icon="el-icon-s-finance"
          type="primary"
          @click="gotoType"
        >{{ $t('type') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showInsert"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="companyArticleList"
      style="width: 100%"
    >
      <el-table-column :label="$t('icon')" width="50">
        <template slot-scope="scope">
          <el-image
            style="width: 40px;height: 40px;margin-top: 10px"
            :src="scope.row.iconUrl"
            fit="fit"
            @click="iconClick(scope.row)"
          >
            <div slot="error" class="image-slot">
              <i style="font-size: 35px" class="el-icon-picture-outline" @click="iconClick(scope.row)" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        :label="$t('title')"
      />
      <el-table-column
        prop="summary"
        :label="$t('summary')"
      />
      <el-table-column
        :label="$t('time')"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 13px">{{
            formatDate(scope.row.createdDate)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="260">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit-outline"
            @click="gotoContent(scope.row)"
          >{{ $t('content') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-upload2"
            @click="push(scope.row)"
          >{{ $t('push') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogCompanyArticleVisible"
      top="15px"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('title')">
          <el-input v-model="companyArticle.title" />
        </el-form-item>
        <el-form-item :label="$t('summary')">
          <el-input v-model="companyArticle.summary" />
        </el-form-item>
        <el-form-item :label="$t('type')">
          <el-select
            v-model="companyArticle.typeId"
            :placeholder="$t('type')"
          >
            <el-option
              v-for="item in companyArticleTypeList"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCompanyArticleVisible = false">{{ $t('close') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('file')"
      :visible.sync="userFileVisible"
      top="15px"
    >
      <user-file :model="fileModel" @change="fileChoice" />
    </el-dialog>

  </div>
</template>
<script>
import {
  cancelNotice,
  formatDate,
  successNotice
} from '@/util/common'
import {
  deleteCompanyArticle,
  installCompanyArticle,
  listCompanyArticle, pushCompanyArticle,
  updateCompanyArticle
} from '@/api/common/commonCompanyArticleApi'
import { listCompanyArticleType } from '@/api/common/commonCompanyArticleTypeApi'
import { getCompanyId } from '@/util/storage'
import UserFile from '@/components/UserFile'

export default {
  name: 'Article',
  components: {
    UserFile
  },
  data() {
    return {
      companyArticleList: [],
      companyArticle: {},
      dialogCompanyArticleVisible: false,
      companyArticleTypeList: [],
      companyId: getCompanyId(),
      userFileVisible: false,
      fileModel: ''
    }
  },
  created() {
    this.listCompanyArticleType()
  },
  methods: {
    iconClick(item) {
      this.companyArticle = item
      this.fileModel = 'choice'
      this.showUserFile()
    },
    fileChoice(filePath) {
      this.companyArticle.iconUrl = filePath
      this.addOrUpdate()
      this.userFileVisible = false
    },
    showUserFile() {
      this.userFileVisible = true
    },
    gotoType() {
      this.$router.push({
        path: '/company/article/type'
      })
    },
    gotoContent(item) {
      this.$router.push({
        path: '/company/article/content/' + item.articleId,
        query: { articleId: item.articleId, title: item.title }
      })
    },
    listCompanyArticleType() {
      listCompanyArticleType({
        companyId: this.companyId
      }).then(res => {
        const { data } = res
        if (data) {
          this.companyArticleTypeList = data
        }
        this.listCompanyArticle()
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.companyArticle = {
        companyId: this.companyId
      }
      this.dialogCompanyArticleVisible = true
    },
    listCompanyArticle() {
      listCompanyArticle({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.companyArticleList = data
        } else {
          this.companyArticleList = []
        }
      })
    },
    addOrUpdate() {
      const json = {
        ...this.companyArticle
      }
      if (!json.articleId) {
        installCompanyArticle(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogCompanyArticleVisible = false
          }
          this.listCompanyArticle()
        })
      } else {
        updateCompanyArticle(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogCompanyArticleVisible = false
          }
          this.listCompanyArticle()
        })
      }
    },
    edit(item) {
      this.companyArticle = item
      this.dialogCompanyArticleVisible = true
    },
    push(item) {
      this.companyArticle = item
      const that = this
      this.$confirm(this.$t('push') + item.title, {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          pushCompanyArticle({
            articleId: item.articleId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.title, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCompanyArticle({
            articleId: item.articleId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listCompanyArticle()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

<style scoped>

</style>
